<template>
<!-- 书籍详情页面 -->
    <div class="BookDetails">
      <!-- 头部 -->
      <Header :Type='type' :Title='detailObj.title'></Header>
      <div class="content">
        <!-- 封面标题作者分类总字数评分标签 -->
          <div class="head">
              <div class="img">
                  <img class='cover' :src="detailObj.cover" alt="">
                  <img class="status" src="../assets/image/wanjie@2x.png" alt="" v-if='detailObj.over==1'>
                  <img class="status" src="../assets/image/lianzai@2x.png" alt="" v-else>
              </div>
              <div class="right">
                  <h3>{{detailObj.title}}</h3>
                  <p>
                      <span>{{detailObj.author}}</span>
                      <span>{{detailObj.majorCate}}</span>
                      <span>{{detailObj.wordCount}}字</span>
                  </p>
                  <div class="star">
                      <van-rate v-model="detailObj.score" />
                  </div>
                  <div class="tag" v-show="tagisShow">
                      <span v-for="(i,j) in detailObj.tags" :key='j'>
                          {{i}}
                      </span>
                  </div>
              </div>
          </div>
          <!-- 追书人数，读者留存率，日更字数 -->
          <div class="reader" >
              <van-row>
                  <van-col span="8">
                      <p>追书人数</p>
                      <p>{{detailObj.latelyFollower}}</p>
                  </van-col>
                  <van-col span="8">
                      <p>读者留存率</p>
                      <p>{{detailObj.retentionRatio}}%</p>
                  </van-col>
                  <van-col span="8">
                      <p>日更新字数</p>
                      <p>{{detailObj.serializeWordCount}}字</p>
                  </van-col>
              </van-row>
              
          </div>
          <!-- 简介 -->
          <div 
              class="introduction"
              ref="introduction"
              :style='{height:longIntroToggle?"1.2rem":"unset"}' 
              @click='showIntro'>
              {{detailObj.longIntro}}
              <van-icon name="arrow-down" v-show="longIntroToggle" size='18'/>
              <div class="mask" @click.stop v-if='longIntroShowMask'></div>
          </div>
          <!-- 最新目录及跳转 -->
          <div class="catalog" @click="goBookCatalog(detailObj.id)">
              <span>目录</span>
              <span class="arrow">更新至
                  {{detailObj.lastChapter}}
              </span>
              <van-icon name="arrow" size='18'/>
          </div>
          <!-- 推荐书籍 -->
          <div class="recommend">
              <div class="head">推荐书单</div>
              <div 
                  class="book"
                  v-for="(i,j) in recommendList"
                  :key="j"
                  @click="goBookDetails(i.id)">
                  <div class="cover">
                      <img :src="i.cover" alt="">
                  </div>
                  <div class="info">
                      <h4>{{i.title}}</h4>
                      <p class="follow">
                          <span>{{i.latelyFollower}}人在追</span>
                          <span>{{i.retentionRatio}}%读者留存</span>
                      </p>
                      <p class="author">
                          <span>{{i.author}}</span>
                          <span>{{i.majorCate}}</span>
                      </p>
                  </div>
              </div>
          </div>
      </div>
        <!-- 底部 -->
      <div class="foot">
          <span>
            <van-cell is-link @click="BookListShowPopup">加入书架</van-cell>
            <BottomPop :ShowPop='BookListShow' @ChangeShowPop='BookListShowPopup'></BottomPop>
          </span>
          <span @click="goBooKRead(detailObj.id)">开始阅读</span>
      </div>
      <Footer></Footer>
    </div>
</template>
<script>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import DownLoad from '@/components/DownLoad.vue'
import BottomPop from '@/components/BottomPop.vue'
export default {
    name:'BookDetails',
    components:{
        Header,
        Footer,
        DownLoad,
        BottomPop
    },
    data(){
        return{
            // Header组件
            title:'',
            type:3,
            // 书籍
            id:'',
            // 底部弹出层
            BookListShow:false,
            // 简介下拉收起
            longIntroToggle:true,
            //标签展示
            tagisShow:true,
            // 简介少于两行时弹层
            longIntroShowMask:false,
            // 书籍详细内容
            detailObj:{},
            // 推荐书籍
            recommendList:[],            
        }
    },
    created(){
        this.id = this.$route.params.id
        this.Check()
    },
    methods:{
        Check(){
          this.$api.Preflight().then(res=>{
              this.getDetail()
          }).catch((()=>{
              console.log('请求出错')
          }))
        },
        // 获得书籍详情
        getDetail(){
            let param={
                id:this.id
            }
            this.$api.getDetail(param).then(res=>{
                this.detailObj=res.data.detail
                // tag转数组
                this.detailObj.tags=res.data.detail.tags.split(',').slice(0,3)
                if(this.detailObj.tags[0] == ''){
                    this.tagisShow=false
                }
                // score转数字
                this.detailObj.score=this.detailObj.score*1
                //推荐书籍
                this.recommendList=res.data.recommend
                // 短简介
                if(this.detailObj.longIntro.length<46){
                  this.longIntroToggle=false
                  this.longIntroShowMask=true
                }
            }).catch()
        },
        // 简介下拉收起
        showIntro(){
            this.longIntroToggle=!this.longIntroToggle
        },
        // 推荐书籍
        goBookDetails(v){
            this.id=v
            // this.title=j
            this.Check()
        },
        // 底部弹层
        BookListShowPopup(){
            this.BookListShow=!this.BookListShow
        },
        // 跳转目录
        goBookCatalog(v){
          this.$router.push({
            name:'BookCatalog',
            params:{
              id:v
            }
          })
        },
        // 跳转图书阅读
        goBooKRead(v){
          this.$router.push({
            name:'BookRead',
            params:{
              id:v,
              label:0
            }
          })
        }
    }
    
}
</script>
<style lang="stylus" scoped>
.content
  .head
    background-color #fff
    display flex
    padding .2rem 0 0 .2rem
    .img 
      width 30%
      position relative
      .cover
        width 90%
      .status
        position absolute
        top 0
        left 0
        width 50%
        height 35%
    .right
      width 70%
      h3
        font-size .32rem
        line-height .66rem
      p
        height .52rem
        line-height .52rem
        font-size .26rem
        color #2f94f9
        span 
          padding 0 .2rem
          position relative
          &:first-child
            padding-left 0
          &:after
            content ''
            position absolute
            width .02rem
            height .3rem
            background-color #2f94f9
            right 0
            top .02rem
          &:last-child
            &:after
              width 0
      .star
        display flex
        height .48rem        
        padding-top .2rem
        position relative
        &:before
          content ''
          position absolute
          width 100%
          height 100%
          z-index 1
      .tag
        display flex
        flex-wrap wrap
        padding-top .2rem
        span
          border 1px solid
          font-size .26rem
          border-radius .04rem
          display flex
          justify-content center
          align-items center
          padding .11rem .22rem
          margin-right .1rem
          color #2998bc
          border-color #2998bc
          &:nth-child(odd)
           color #e33f40
           border-color #e33f40
  .reader
    background-color #fff
    font-size .34rem
    text-align center
    padding .2rem 0
    border-bottom .02rem solid #ccc
    .van-col
      border-right .02rem solid #ccc
      &:last-child
        border none
      p:last-child
        font-size .24rem
        color #999  
  .introduction
    background-color #fff
    padding .2rem
    font-size .28rem
    line-height .46rem
    overflow hidden
    position relative
    .van-icon
      position absolute
      right .2rem
      bottom 0.1rem
      background-color #fff
      box-shadow 0 0 .5rem #fff
    .mask
      position absolute
      width 100%
      height 100%
      top 0
      left 0
      background-color transparent
      z-index 2
  .catalog
    padding 0 .24rem
    font-size .28rem
    height .8rem
    background-color transparent
    display flex
    justify-content space-between
    align-items center
    .arrow
      max-width 60%
      height .8rem
      line-height .8rem
      overflow hidden
      position absolute
      right .6rem
      .van-icon
        box-shadow 0 0 .08rem #fff
  .recommend
    background-color #fff
    .head
      padding-top 0.2rem
      border-left .05rem solid #2f94f9 
      font-size .32rem
      height .28rem
      line-height .28rem
    .book
      &:last-child
        margin-bottom 0
        padding-bottom .15rem
        .info
          border none        
      display flex
      height 2rem
      flex-wrap wrap
      margin .4rem 0
      .cover
        width 30%
        height 100%
        text-align center
        img
          width 65%
      .info
        width 70%
        height 105%
        border-bottom .02rem solid #ccc
        display flex
        flex-direction column
        justify-content space-around
        h4
          font-size .28rem
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow hidden
        .follow
          display flex
          font-size .24rem
          color #ccc
          span:first-child
            padding-right .2rem
            margin-right .2rem
            position relative
            &:after
              content ''
              position absolute
              width .02rem
              height .3rem
              background-color #ccc
              right 0
              top 0
        .author
          font-size .26rem
          color #2f94f9
          padding-bottom .1rem
          span:first-child
            padding-right .2rem
            margin-right .2rem
            position relative
            &:after
              content ''
              position absolute
              width .02rem
              height .3rem
              background-color #2f94f9
              right 0
              top 0
.foot
    position fixed
    z-index 1
    width 100%
    bottom 0
    height 1.2rem
    display flex
    text-align center
    background-color #fff
    span 
      display flex
      align-items center
      justify-content center
      width 50%
      color #2f94f9
      &:last-child
        background #2f94f9
        font-size .34rem
        color #fff
      >>> .van-cell__value--alone
        font-size .34rem
        text-align center
      >>> i
        display none
      >>> .van-popup
        background-color #eee
      >>> .van-cell--clickable
        &:after
          display none
    .Popbtn
      height 45%
      color #222
      font-size .36rem
      line-height 1rem
      background-color #fff
      &:last-child
        margin-top .2rem
.BookDetails
  >>> .footer
    padding-bottom 1.5rem
</style>